<template>
  <div class="login">
    <div class="login-form">
      <h3 class="title">商标服务系统后台管理</h3>
      <div class="login-user">
        <el-input placeholder="请输入你的账号" prefix-icon="el-icon-user-solid" v-model="user.name"></el-input>
      </div>
      <div class="login-pass">
        <el-input placeholder="请输入你的密码" prefix-icon="el-icon-s-cooperation" v-model="user.pass"></el-input>
      </div>
      <div class="login-verify">
        <el-input
          placeholder="验证码"
          prefix-icon="el-icon-s-opportunity"
          v-model="user.verify"
          @keyup.enter.native="gohome"
        ></el-input>
        <span @click="imgchange">
          <el-tooltip class="item" effect="dark" content="点击更换验证码" placement="top-start">
            <img :src="verify" alt />
          </el-tooltip>
        </span>
      </div>
      <div class="login-remember">
        <el-checkbox v-model="checked">记住密码</el-checkbox>
      </div>
      <div class="login-btn">
        <el-button class="btn-width" type="primary" @click="gohome">登录</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        name: "admin",
        pass: "admin123",
        verify: "",
        uuid: "",
      },
      //验证码
      name: "123",
      pass: "123",
      verify: "",
      checked: false,
      token: "",
    };
  },
  methods: {
    //点击更换验证码
    imgchange() {
      this.getimg();
    },
    gohome() {
      this.getuser();
    },
    //获取验证码
    getimg() {
      this.$http.get("oauth/captchaImage").then((res) => {
        this.verify = "data:image/png;base64," + res.data.img;
        this.user.uuid = res.data.uuid;
      });
    },
    //账号
    getuser() {
      // const params = new URLSearchParams();
      // params.append("code", this.user.verify);
      // params.append("password", this.user.pass);
      // params.append("username", this.user.name);
      // params.append("uuid", this.user.uuid);
      let logindata = {
        code: this.user.verify,
        password: this.user.pass,
        username: this.user.name,
        uuid: this.user.uuid,
      };
      this.$http.post("oauth/login", logindata).then((res) => {
        if (res.data.token) {
          sessionStorage.setItem("token", res.data.token);
          this.$router.push({
            path: "/homemenu",
          });
        } else {
          this.$message.error("信息有误");
        }
      });
    },
  },
  mounted() {
    this.getimg();
  },
};
</script>

<style lang="less" scoped>
.login {
  width: 100%;
  height: 100vh;
  background: url("../assets/img/1s_by_wlop-dc1sdan.jpg") no-repeat;
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .login-form {
    min-width: 400px;
    padding: 25px 25px 5px;
    background-color: #fff;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .title {
      margin-bottom: 22px;
      font-size: 20px;
      font-weight: 900;
      color: #707070;
    }
    .login-user,
    .login-pass,
    .login-remember,
    .login-btn {
      width: 100%;
      margin-bottom: 22px;
    }
    .login-pass {
      width: 100%;
      margin-bottom: 22px;
    }
    .login-verify {
      width: 100%;
      margin-bottom: 22px;
      display: flex;
      span {
        padding-left: 8px;
        height: 40px;
        cursor: pointer;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .btn-width {
      width: 100%;
    }
  }
}
</style>
